<template>
     <van-row>
    <van-col :span="24">
      <!-- 轮播图 -->
      <van-swipe :autoplay="2000" lazy-render class="my-swipe" >
        <!-- 轮播图项  循环images展示不同的图片   图片链接就是我们之前上传在服务端的图片 -->
        <van-swipe-item v-for="image in images" :key="image">
          <img :src="image" />
        </van-swipe-item>
      </van-swipe>
    </van-col>
  </van-row>
  <van-row style="margin-top: 20px;">
    <van-col :span="8" align="center">
        <div><img class="icon" src="../assets/businessIcon.png"></div>
        <div class="iconText">商家</div>
    </van-col>
    <van-col :span="8" align="center">
        <div><img class="icon" src="../assets/foodIcon.png"></div>
        <div class="iconText">餐品</div>
    </van-col>
    <van-col :span="8" align="center">
        <div><img class="icon" src="../assets/cartIcon.png"></div>
        <div class="iconText">餐车</div>
    </van-col>
  </van-row>
  <van-row style="margin-top: 20px;">
    <van-col :span="8" align="center">
        <div><img class="icon" src="../assets/orderIcon.png"></div>
        <div class="iconText">订单</div>
    </van-col>
    <van-col :span="8" align="center">
        <div><img class="icon" src="../assets/addressIcon.png"></div>
        <div class="iconText">地址</div>
    </van-col>
    <van-col :span="8" align="center">
        <div><img class="icon" src="../assets/tuijianIcon.png"></div>
        <div class="iconText">推荐</div>
    </van-col>
  </van-row>
   <!-- 推荐的商家列表 -->
   <van-row style="margin-top: 20px;">
    <van-col :span="24" align="center" style="color: #555;">
       ---- 推荐商家 ----
    </van-col>
  </van-row>
  <van-row style="margin-top: 10px;">
    <van-col :span="24" align="center" >
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
         <!-- 列表项 -->
          <van-row style="margin-top: 5px;" v-for="business in recommendBusinessList" :key="business.businessId">
            <van-col :span="8" align="center" >
                <img :src="business.businessImg" style="width: 60%;height: 60px;">
            </van-col>
            <van-col :span="16" align="left" >
                <div style="font-size: 16px;">{{business.businessName}}</div>
                <div style="font-size: 12px;">{{business.businessExplain}}</div>
                <div style="font-size: 12px;">{{business.businessAddress}}</div>
            </van-col>
          </van-row>
      </van-list>
    </van-col>
  </van-row>
</template>

<script setup>
    import {onMounted, ref,getCurrentInstance} from 'vue';
    import { showNotify } from 'vant';
    const {proxy} = getCurrentInstance();
    const images = ref([
      'https://img95.699pic.com/photo/50108/8215.jpg_wh860.jpg',
      'http://smk4ysaa0.hd-bkt.clouddn.com/22980c12618a4825ad6e0adb63a4184ccanguan003.jpg',
      'https://ts1.cn.mm.bing.net/th/id/R-C.dacb9b2b167cfbfec6b6d0aecf05b2e8?rik=7ziK85AFh6tZcA&riu=http%3a%2f%2fwww.5ddchina.com%2fuploads%2f190506%2f1-1Z506112625R3.jpg&ehk=wauSqETCbW65kmu%2fGXr0UpSlqhXLJyWksf17gql3Em8%3d&risl=&pid=ImgRaw&r=0',
      'http://smk4ysaa0.hd-bkt.clouddn.com/5c660588418948b2900a148d9bd21876canguan002.jpg',
    ]);
    const loading=ref(false);//列表加载状态
    const finished=ref(false);//加载是否完成
    //推荐商家的列表
    let recommendBusinessList=ref([]);
    
    const getRecommendBusiness=()=>{
          loading.value=true;
          proxy.$axios({
            method: 'get',
            url: '/business/recommend'
        }).then(res=>{
          let resultBean = res.data;
          if(resultBean.code == 200){
            recommendBusinessList.value = resultBean.data;
            loading.value = false;
            finished.value = true;
          }else{
            showNotify({ message: resultBean.msg });
          }
        }).catch(error=>{
          showNotify({ message: error.message });
        })
    }
    onMounted(()=>{
    //获取推荐商家
    getRecommendBusiness();
  })
</script>
<style scoped>
      .my-swipe .van-swipe-item {
    width: 100%;
    text-align: center;
  }
  .my-swipe .van-swipe-item img{
    width: 100%;
    height: 250px;
  }
  .icon{
    width: 35%;
    cursor: pointer;
  }

  .icon:hover{
    opacity: 0.6;
  }

  .iconText{
    font-size: 12px;
    color: #555;
    font-family: 微软雅黑;
  }
</style>
